<template>
  <div class="page" id="page">
    <div class="login-area">
      <div class="logo">
        <!-- <p>综合能源服务管理平台</p> -->
        <!-- <img src="../../assets/login-logo.png" alt="" /> -->
        <!-- <p>纽创固废智慧管理云平台</p> -->
      </div>
      <el-form :model="ruleForm" :rules="rules" :inline-message="true" ref="ruleForm" label-width="0px" class="loginForm">
        <el-form-item label="" prop="username">
          <el-input class="icon-input username" v-model="ruleForm.username" clearable placeholder="用户名" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input class="icon-input password" v-model="ruleForm.password" type="password" clearable placeholder="密码" :maxlength="20"></el-input>
        </el-form-item>
        <!-- <el-form-item label="" prop="verifyCode" ref="verifyCode">
  <div class="code-area">
    <el-input class="icon-input" v-model="ruleForm.verifyCode" clearable placeholder="图形验证码" :maxlength="6"></el-input>
    <span id="v_container"></span>
  </div>
</el-form-item>
 -->
        <el-form-item class="remember-password">
          <label>
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </label>
        </el-form-item>
        <el-form-item>
          <el-button class="login" @click="login">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <footer class="footer">
      <p><span>帮助</span><span>隐私</span><span>条款</span></p>
      <p>Copyright © {{ new Date().getFullYear() }} 江苏纽创数据技术有限公司</p>
    </footer>
  </div>
</template>
<script>
import { hex_md5 } from '@/utils/md5'
export default {
  data() {
    let validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };


    let validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };

    return {
      // verifyCode: null,
      checked: false,
      ruleForm: {
        username: '',
        password: '',
        // verifyCode: ''
      },
      rules: {
        username: [{ required: true, validator: validateUsername, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, validator: validatePassword, message: '请输入密码', trigger: 'blur' }],
        // verifyCode: [{ required: true, validator: validateCode, message: '请输入验证码', trigger: 'blur' }]
      }
    };
  },
  mounted() {
    // this.verifyCode = new GVerify("v_container");
    document.getElementById('page').style.minHeight = document.documentElement.clientHeight + 'px';
    document.onkeydown = (e) => {
      let key = window.event.keyCode;
      if (key == 13) this.login();
    };
    if (localStorage.nc_token) {
      this.$router.push('/main/index')
    }
  },
  methods: {
    login() {
      let md5Pwd = hex_md5(this.ruleForm.password);
      localStorage.nc_token = ''
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$common.$ajax('/api/login/check', {
            username: this.ruleForm.username,
            password: hex_md5(this.ruleForm.password)

          }, 'get').then(res => {
            console.log(res)
            localStorage.nc_token = res.data.body.sessionId;
            localStorage.userName = res.data.body.name;
            localStorage.companyType = res.data.body.companyType
            localStorage.companyName = res.data.body.companyName
            localStorage.czCompanyId = res.data.body.companyId
            localStorage.userId = res.data.body.userId;
            // 获取用户信息
            this.$common.$ajax('/sys/user/infoById', { userId: res.data.body.userId }, 'get').then(res => {
              console.log('//////')
              console.log(res.data)
              localStorage.currentLoginInfos = JSON.stringify(res.data.body.extSysCompany)
              // this.$store.state.userInfo = ;
              this.$router.push({ path: '/main/index' });
            })


          });
          /*if (res) {
          } else {
            this.$refs.verifyCode.validateState = 'error';
            this.$refs.verifyCode.validateMessage = '验证码错误';
          }*/
        }
      });
    }
  }
}

</script>
<style lang="scss" scoped>
.page {
  background: url(../../assets/bg.jpg) 100% no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page .footer {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 369px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.67);
  font-size: 12px;
  font-family: MicrosoftYaHei;
  text-align: center;

  p {
    padding: 7px 0;

    span {
      padding: 0 20px;

      &:hover {
        cursor: pointer;
        color: #409EFF;
      }
    }
  }
}

.login-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  // margin-left: 50px;
  background: #ffffff;
  border-radius: 10px;
  height: 300px;
  min-width: 200px;
  min-height: 180px;
  padding: 0 26px;
  box-sizing: border-box;

  .logo {
    margin-bottom: 35px;
    text-align: center;
    width: 369px;

    p {
      color: rgba(255, 255, 255, 0.4);
      font-size: 14px;
      font-family: MicrosoftYaHei;
    }
  }

  .remember-password {
    margin: -13px 0 22px 0;
  }
}

.el-form-item {
  width: 100%;
  border: none;
}



.el-button {
  background: #06c1ae;
  border: 1px solid #06c1ae;
  color: #fff;
  width: 100%;
  display: block;

}


.icon-input {
  &::before {
    content: '';
    position: absolute;
    width: 23px;
    height: 26px;
    top: 7px;
    left: 15px;
    background-size: cover;
  }

  &.username::before {
    background: url(../../assets/icon-user.png);

  }

  &.password::before {
    background: url(../../assets/icon-pwd.png);
  }
}

.code-area {
  display: flex;

  #v_container {
    display: block;
    height: 40px;
    width: 113px;
    border-radius: 4px;
    margin-left: 9px;
  }
}

.login {

  margin-top: 22px;
}

</style>
